<template>
    <div>
      <el-container>
        <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e4e7ed;">
          <span>
            <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            &nbsp&nbsp
            <span class="title">充电桩管理</span>
          </span>
          <div>
            <el-input placeholder="请输入关键字搜索" v-model="searchKey" style="width: 250px; margin-right: 10px;"></el-input>
            <el-button type="primary" icon="el-icon-search">高级搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addTask" >查询</el-button>
            <el-button type="info" >重置</el-button>
          </div>
        </el-header>
        <el-main>
          <el-table :data="taskList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed prop="id" label="序号" width="55"></el-table-column>
            <el-table-column prop="pileNum" label="充电桩编号" width="100"></el-table-column>
            <el-table-column prop="pileName" label="充电桩名称" width="100"></el-table-column>
            <el-table-column prop="" label="充电桩类别" width="220"></el-table-column>
            <el-table-column prop="" label="充电桩类型" width="100"></el-table-column>
            <el-table-column prop="" label="充电枪数量" width="160"></el-table-column>
            <el-table-column prop="" label="充电功率" width="120"></el-table-column>
            <el-table-column prop="" label="归属充电站" width="120"></el-table-column>
            <el-table-column prop="bookingCondition" label="状态" width="80" :formatter="formatStatus"></el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <el-button @click="viewTask(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="editTask(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="submitTask(scope.row)" type="text" size="small">禁用</el-button>
                <el-button @click="deleteTask(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchKey: '',
        taskList: [
          {
            id: 1,
            stationNum: 'ZGSBZD',
            adds: 'XXX充电桩XX区XX点',
            bookingTime: '正部级',
            bookingStartTime: '1',
            clientName: '1',
            bookingCondition: '已取消'
          },
          // 此处可继续添加更多模拟数据
        ]
      };
    },
    methods: {
      handleSelectionChange() {},
      formatStatus(row, column) {
        if (row.bookingCondition === '已取消') {
          return <span style="color: red;">{row.bookingCondition}</span>;
        } else if (row.bookingCondition === '已预约') {
          return <span style="color: green;">{row.bookingCondition}</span>;
        }
        return row.bookingCondition;
      },
      viewTask(row) {
        console.log('查看任务详情', row);
        this.$router.push('/hostDisplayDetail')
      },
      editTask(row) {
        console.log('编辑任务', row);
      },
      submitTask(row) {
        console.log('提交任务', row);
      },
      deleteTask(row) {
        console.log('删除任务', row);
      },
      addTask(row) {
        console.log('新增任务', row);
        this.$router.push('/hostDisplayAdd')
      }
    }
  };
  </script>
  
  <style scoped>
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  /* 设置表格内文字自动换行 */
  .el-table {
    white-space: nowrap; /* 取消自动换行 */
    font-size: 14px; /* 把表格内字体改小，可根据实际情况调整 */
  }
  div {
    background-color: rgb(255, 255, 255);
  }
  </style>